/*
 * @Description: 命令下拉按钮
 * @version: 1.0.0
 * @Author: YinJianFeng
 * @Date: 2024-04-08 13:33:45
 */
import { CaretUpOutlined, DownOutlined } from '@ant-design/icons';
import { Dropdown } from 'antd';
import { MenuItemType } from 'antd/es/menu/interface';
import i18n from 'i18next';
import React, { useState, useEffect } from 'react';
import { CmdButton } from './CmdButton';
import { useCommandManager, BaseCommand, Icon } from '@amcax/base';
import { useUserSettingCustomer } from '@app-base/common/providers/userSettingProvider';

interface IProps {
  cmds: BaseCommand[];
  showLabel?: boolean;
  cmdStyle?: string;
}

export function CmdSplitButton({
  cmds,
  showLabel = true,
  cmdStyle = 'down',
}: IProps) {
  const { invokeCmd } = useCommandManager();
  const { hiddenCommandIds, currentEnvironment } = useUserSettingCustomer();
  const isUp = cmdStyle === 'up';
  const [open, setOpen] = useState(false);

  const availableCmds = cmds.filter(
    (cmd) => !hiddenCommandIds?.[currentEnvironment]?.includes(cmd.id),
  );

  const [selectedCmd, setSelectedCmd] = useState<BaseCommand | undefined>(
    availableCmds[0],
  );

  useEffect(() => {
    if (
      !selectedCmd ||
      hiddenCommandIds?.[currentEnvironment]?.includes(selectedCmd.id)
    ) {
      setSelectedCmd(availableCmds[0]);
    }
  }, [hiddenCommandIds, currentEnvironment, cmds]);

  if (!cmds || cmds.length === 0 || !availableCmds.length) return null;

  const handleMenuItemClick = (info: any, index: number) => {
    info.domEvent.stopPropagation();
    const cmd = availableCmds[index];
    setSelectedCmd(cmd);
    setOpen(false);
    invokeCmd(cmd);
  };

  const menuItems: MenuItemType[] = availableCmds.map((cmd, index) => ({
    key: cmd.id,
    label: i18n.t(cmd.label),
    icon: (
      <Icon
        name={cmd.icon}
        size={20}
        style={{ fontSize: '24px' }}
      />
    ),
    style: { pointerEvents: 'auto' as const },
    onClick: (info) => handleMenuItemClick(info, index),
  }));

  return (
    <div
      style={
        isUp
          ? { position: 'relative', paddingRight: '8px' }
          : { position: 'relative' }
      }
    >
      {selectedCmd && (
        <CmdButton
          cmd={selectedCmd}
          showLabel={showLabel}
        />
      )}
      <Dropdown
        placement='bottom'
        menu={{ items: menuItems }}
        onOpenChange={setOpen}
        open={open}
      >
        {isUp ? (
          <div
            style={{
              height: 'auto',
              position: 'absolute',
              top: '50%',
              right: '0px',
              width: '8px',
              transform: 'translate(0, -50%)',
            }}
          >
            <DownOutlined style={{ width: '8px' }} />
          </div>
        ) : (
          <div
            style={{
              height: 'auto',
              position: 'absolute',
              top: '-4px',
              right: '-4px',
            }}
          >
            <CaretUpOutlined style={{ transform: 'rotate(45deg)' }} />
          </div>
        )}
      </Dropdown>
    </div>
  );
}
